<template>
  <canvas class="webgl" ref="containerRef"></canvas>

  <MoreInfo>
    <p>PBR(physically based rendering)</p>
    <p>UV coordinates</p>
    <p>图片越小越好(webp)</p>
    <p>png 无损</p>
    <el-divider></el-divider>
    <p>纹理网址：</p>

    <el-link href="https://www.poliigon.com/" type="primary" target="_blank"
      >https://www.poliigon.com/</el-link
    >
    <el-link href="https://3dtextures.me/" type="primary" target="_blank"
      >https://3dtextures.me/</el-link
    >
    <el-link
      href="https://www.arroway-textures.ch/"
      type="primary"
      target="_blank"
      >https://www.arroway-textures.ch/</el-link
    >
  </MoreInfo>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useThree } from '@/hooks/use-three-hook'
import MoreInfo from '@/components/MoreInfo.vue'
// import HighlightJS from '@/components/HighlightJS.vue'

const containerRef = ref<HTMLCanvasElement | null>(null)
const { renderer } = useThree(containerRef)

onMounted(() => {
  console.log('🚀 ~ renderer:', renderer)
})
</script>
<style scoped>
.el-link {
  margin-right: 10px;
}
</style>
